<template>
	<div class="wos-page">
		<div class="main">
			<div id="plan-a-a">
				<div class="wos-flex" style="height: 60px; line-height:60px">
					<div style="width: 100px">类型：</div>
					<div>
						<select class="wos-input" style="width:200px">
							<option value="主码流">主码流</option>
							<option value="辅码流">辅码流</option>
							<option value="图片存储">图片存储</option>
							<option value="AI回放">AI回放</option>
						</select>
					</div>
					<div style="margin-left: 20px">
						<input type="checkbox"> &nbsp; &nbsp; 负载均衡
					</div>
				</div>
				<!--自动搜索-->
				<div class="wos-tab">
					<div class="wos-tab-title wos-flex-between wos-flex" @click="aaa = !aaa">
						<div>
							多通道
						</div>
						<div>
							<i class="iconfont icon-down" v-if="aaa === false"></i>
							<i class="iconfont icon-up" v-else></i>
						</div>
					</div>
					<div class="wos-tab-main" v-show=" aaa === true">
						<div style="height: 60px; padding: 20px; width: 100%;border: 1px solid #C2C4C9" class="wos-flex wos-flex-between">
							<div class="wos-flex">
								<div style="width: 100px">通道：</div>
								<div>
									<input type="text" class="wos-input" value="1"> --
									<input type="text" class="wos-input" value="1">
								</div>
							</div>
							<div class="wos-flex">
								<div style="width: 100px">盘组选择:</div>
								<div>
									<select class="wos-input" style="width:200px">
										<option value="-">-</option>
										<option value="普通盘组1">普通盘组1</option>
									</select>
								</div>

							</div>
						</div>
					</div>
				</div>
				<!--手动添加-->
				<div class="wos-tab">
					<div class="wos-tab-title wos-flex-between wos-flex" @click="bbb = !bbb">
						<div>
							单通道
						</div>
						<div>
							<i class="iconfont icon-down" v-if="bbb === false"></i>
							<i class="iconfont icon-up" v-else></i>
						</div>
					</div>
					<div class="wos-tab-main" v-show="bbb === true">
						<wos-table :record="location"></wos-table>
					</div>
				</div>
			</div>
		</div>
		<div class="console">
			<button @click="refresh">刷新</button>
			<button @click="refresh">删除</button>
		</div>
	</div>
</template>

<script>
    export default {
        name: "onlineusers",
        data:function(){
            return {
                location:[],
	            aaa:true,
                bbb:true
            }
        },
        beforeMount() {
            this.getData()
        },
        methods:{
            getData(){
                let that = this
                this.axios.get('/api/direct/location.json')
                    .then(function (response) {
                        if( response.data.code == 200) {
                            that.location = response.data.data
                        }
                    })
                    .catch(function (error) {
                        that.$message.warn('服务器连接超时，请稍后重试')
                    });
            },
            refresh(){
                this.getData()
                this.jumpTop()
            }
        }
    }
</script>
